import { Badge } from '/components/badge'

# 方法列表

本节介绍 Umo Editor 的方法，通过 Umo Editor 提供的方法，可以对 Umo Editor 进行一些常规操作。您可以访问[https://umodoc.com/demo?pane=events](https://umodoc.com/demo?pane=events)，点击对应的方法按钮，查看方法的使用。

## 示例

```vue
<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="getOptions">获取配置</button>
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const editorRef = ref(null);
  const options = ref({
    // 配置项
    // ...
  })

  const getOptions = () => {
    const options = editorRef.value.getOptions();
    console.log(options);
  }
</script>
```

## 方法说明

### getOptions

**说明**：获取 Umo Editor 的配置。

**参数**：无

**返回值**：Object，包含，包含 Umo Editor 的配置。

### setOptions

**说明**：设置 Umo Editor 的配置。

**参数**：Object，包含 Umo Editor 的配置。

**返回值**：Object，包含，包含 Umo Editor 的配置。

### setToolbar

**说明**：设置 Umo Editor 的工具栏类型。

**参数**：\{ mode, show \}

- `mode`：String，工具栏类型，可选值为 `ribbon`、`classic`。
- `show`：Boolean，是否显示工具栏。

**返回值**：无。

### setPage

**说明**：设置 Umo Editor 的页面信息。

**参数**：Object，包含要设置的页面信息。

- `size`：String，页面大小，应为 `dicts.pageSizes` 中提供的 `label` 值，如 A4。
- `orientation`：String，页面方向，可选值为 `portrait`、`landscape`。
- `background`：String，页面背景，合法的[CSS 颜色](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value)值。

**返回值**：无。

### setWatermark

**说明**：设置 Umo Editor 的水印信息。

**参数**：Object，包含要设置的水印信息。

- `type`: String，水印类型，可选值为：`compact`、`spacious`。
- `alpha`: Number，水印透明度，可选值为：0-1。
- `fontColor`: String，字体颜色，可选值为：合法的[CSS 颜色](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value)值。
- `fontSize`: Number，字体大小，单位为 px。
- `fontFamily`: Number，字体，合法的[CSS font-family](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family)值。
- `fontWeight`: Sring，字体粗细，可选值为：`normal`、`bold`、`bolder`。
- `text`: String，水印内容，建议不超过 30 个字符。

**返回值**：无。

### setDocument

**说明**：设置 Umo Editor 的文档信息。

**参数**：Object，包含要设置的文档信息。

- `title`: String，文档标题。
- `bubbleMenu`: Boolean，是否启用气泡菜单。
- `blockMenu`: Boolean，是否启用块级菜单。
- `markdown`: Boolean，是否启用 Markdown 语法。
- `spellcheck`: Boolean，是否启用浏览器拼写检查。

**返回值**：无。

### setContent

**说明**：设置 Umo Editor 的内容。

**参数**：

- `content` : 合法的 HTML 格式或其他合法的[Tiptap 文档格式](https://tiptap.dev/docs/editor/guide/output)。
- `options` :  // v2.2.0 新增
  - `emitUpdate`: `true`，是否触发更新事件。
  - `focusPosition`: focus 位置，可选值为：'start' | 'end' | 'all' | number | boolean | null (false)。
  - `focusOptions`: `{ scrollIntoView: true }`。

**返回值**：无。

### insertContent

**说明**：在当前选中文本位置插入内容。 <Badge theme="success">v6.0.0 新增</Badge>

**参数**：

- `content` : 合法的 HTML 格式或其他合法的[Tiptap 文档格式](https://tiptap.dev/docs/editor/guide/output)。
- `options` : 
  - `updateSelection`: `true`，是否更新选区。
  - `focusPosition`: focus 位置，可选值为：'start' | 'end' | 'all' | number | boolean | null (false)。
  - `focusOptions`: `{ scrollIntoView: true }`。

**返回值**：无。

### setLocale 

**说明**：设置 Umo Editor 的显示语言。 <Badge theme="success">v2.0.0 新增</Badge>

**参数**：`zh-CN` 或 `en-US`。

**返回值**：无。

### setTheme 

**说明**：设置 Umo Editor 的主题。 <Badge theme="success">v2.1.0 新增</Badge>

**参数**：`light` 、 `dark` 、 `auto`。

**返回值**：无。

### getPage 

**说明**：获取 Umo Editor 的页面配置信息。 <Badge theme="success">v5.0.0 新增</Badge>

**参数**：无。

**返回值**：页面配置信息。

### setPage 

**说明**：设置 Umo Editor 的页面配置信息。 <Badge theme="success">v5.0.0 新增</Badge>

**参数**：页面配置信息。

**返回值**：无。

### getContent 

**说明**：获取 Umo Editor 的内容。

**参数**：String，可选值为 `html`、`json`、`text`。

**返回值**：`html`、`json`、`text`。

### getContentExcerpt

**说明**：获取 Umo Editor 的内容摘要。

**参数**：

- `charLimit`：Number，摘要长度，默认为 100 个字符。
- `more`：String，摘要结尾，默认为 ` ...`。

**返回值**：文档摘要。

### getHTML

**说明**：获取 Umo Editor 的 HTML 内容。

**参数**：无。

**返回值**：`html`。

### getJSON

**说明**：获取 Umo Editor 的 JSON 内容。

**参数**：无。

**返回值**：`JSON`。

### getText

**说明**：获取 Umo Editor 的文本内容。

**参数**：无。

**返回值**：文本。

### getImage

**说明**：获取 Umo Editor 的页面截图。

**参数**：String，可选值为 `blob`、`jpeg`、`png`。

**返回值**：图片信息。

### saveContent

**说明**：保存 Umo Editor 的内容。

**参数**： Boolean，是否显示保存成功的提示消息。

**返回值**：无。

### getEditor

**说明**：获取 Editor 的 Vue 实例。

**参数**：无。

**返回值**：Tiptap Editor 的 Vue 实例。

### useEditor

**说明**：获取 Editor 的实例。 <Badge theme="success">v4.6.0 新增</Badge>

**参数**：无。

**返回值**：Tiptap Editor 实例。

### getTableOfContents 

**说明**：获取页面大纲，更多页面大纲信息可以通过 `getEditor()` 获取编辑器实例后，`editor.storage.tableOfContents` 获取。 <Badge theme="success">v3.0.0 新增</Badge>

**参数**：无。

**返回值**：
```js
[
  {
    dom: HTMLElement, // 当前锚点对应的HTML元素
    editor: Editor, // 编辑器实例
    id: String, // 节点 ID
    isActive: Boolean, // 当前锚点是否处于激活状态
    isScrolledOver: Boolean, // 这个锚点是否已经被滚动经过
    itemIndex: Number, // 在当前层级上的项目索引
    level: Number, // 项目的当前层级 - 这可能与实际的锚点层级不同，用于从高级到低级渲染层次结构
    node: Node, // 当前锚点对应的 ProseMirror 节点
    originalLevel: Number, // 实际层级
    pos: Number, // 锚点节点的位置
    textContent: String // 锚点的文本内容
  }
]
```

### getSelectionText 

**说明**：获取当前选中文字文字内容。 <Badge theme="success">v3.0.0 新增</Badge>

**参数**：无。

**返回值**：无

### getSelectionNode

**说明**：获取当前选中节点信息，自 v6.0.0 版本开始，调整为获取当前选中的节点，而非当前选中节点的祖先节点（即文档节点的子节点）。 <Badge theme="success">v3.0.0 新增</Badge>

**参数**：无。

**返回值**：Tiptap Node。

### setCurrentNodeSelection

**说明**：用于选中当前焦点所在位置的整个节点，例如光标在 table 中的单元格时，调用该方法会选中整个表格。 <Badge theme="success">v3.1.0 新增</Badge>

**参数**：无。

**返回值**：无。

### deleteSelectionNode

**说明**：删除当前选中的节点，自 v6.0.0 版本开始，调整为删除当前选中的节点，而非当前选中节点的祖先节点（即文档节点的子节点）。 <Badge theme="success">v3.0.0 新增</Badge>

**参数**：无。

**返回值**：无

### getLocale 

**说明**：返回 Umo Editor 的显示语言。 <Badge theme="success">v2.0.0 新增</Badge>

**参数**：无。

**返回值**：`zh-CN` 或 `en-US`。

### getI18n 

**说明**：返回[`vue-i18n`](https://vue-i18n.intlify.dev/guide/introduction.html)实例。 <Badge theme="success">v2.0.0 新增</Badge>

**参数**：无。

**返回值**：`vue-i18n`。

### setReadOnly

**说明**：设置 Umo Editor 的只读状态。

**参数**：Boolean，是否只读。

**返回值**：无。

### print

**说明**：打印页面。 <Badge theme="success">v1.1.0 新增</Badge>

**参数**：无。

**返回值**：无。

### focus

**说明**：使 Umo Editor 获取焦点。

**参数**：

- `position` : 'start' | 'end' | 'all' | number | boolean | null (false)
- `options` : \{ scrollIntoView: boolean \} // v2.2.0 新增


**返回值**：无。

### blur

**说明**：使 Umo Editor 失去焦点。

**参数**：无。

**返回值**：无。

### toggleFullscreen

**说明**：切换 Umo Editor 的全屏状态（视口全屏，并非浏览器全屏）。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：无。

**返回值**：无。

### getAllBookmarks

**说明**：返回文档中的所有书签。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：无。

**返回值**：`Array`，书签名称数组。

### focusBookmark

**说明**：聚焦到指定的书签位置。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：`bookmarkName`，String，书签名称。

**返回值**：`Boolean`，是否设置成功。

### setBookmark

**说明**：设置书签。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：`bookmarkName`，String，书签名称。

**返回值**：`Boolean`，是否设置成功。

### deleteBookmark

**说明**：删除指定书签。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：`bookmarkName`，String，书签名称。

**返回值**：`Boolean`，是否删除成功。

### openAside

**说明**：根据右侧面板标识展开右侧面板。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：`key`，String，右侧面板的唯一标识符。

**返回值**：无

### closeAside

**说明**：根据右侧面板表示关闭右侧面板。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：`key`，String，右侧面板的唯一标识符。

**返回值**：无

### openAIChat

**说明**：打开右侧Chat聊天框。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：无

**返回值**：无

### closeAIChat

**说明**：关闭右侧Chat聊天框。<Badge theme="success">v6.0.0 新增</Badge>

**参数**：无

**返回值**：无

### startTypewriter

**说明**：以打字机效果插入内容。<Badge theme="success">v7.0.0 新增</Badge>

**参数**：
- `content` : 合法的[Tiptap JSON 文档格式](https://tiptap.dev/docs/editor/guide/output)。
- `options` : 
  - `speed`: `Number`，打字机效果的间隔时间。
  - `step`: `Number`，打字机步长，每次打字的显示数量,为了效果，建议不超过10。
  - `onComplete`: `function`，打字机完成后的回调函数。

**返回值**：无。

### stopTypewriter

**说明**：终止打字机插入内容效果。<Badge theme="success">v7.0.0 新增</Badge>

**参数**：无。

**返回值**：无。

### getTypewriterState

**说明**：获取打字机的运行状态。<Badge theme="success">v7.0.0 新增</Badge>

**参数**：无。

**返回值**：
- `isRunning` :  `Boolean` 当前打字机的运行状态 `true`表示正在运行，`false` 表示打字机已停止。
- `currentParagraph` :  `Number` 当前打字机运行到的段落位置。
- `currentTextNode` : `Number` 当前打字机运行到的段落下的文本节点位置。
- `currentChar` :  `Number` 当前打字机运行到段落下的字符位置。

### useAlert

**说明**：使用 Umo Editor 的提示框。

**参数**：`options`，object，[TDesign Next Dialog](https://tdesign.tencent.com/vue-next/components/dialog?tab=api)的相关配置。

**返回值**：TDesign Next Dialog 实例。

### useConfirm

**说明**：使用 Umo Editor 的确认框。

**参数**：`options`，object，[TDesign Next Dialog](https://tdesign.tencent.com/vue-next/components/dialog?tab=api)的相关配置。

**返回值**：TDesign Next Dialog 实例。

### useMessage

**说明**：使用 Umo Editor 的消息提示。

**参数**：
- `type`：String，消息类型，可选值为 `success`、`warning`、`error`、`info`。
- `options`：[TDesign Next Message](https://tdesign.tencent.com/vue-next/components/message?tab=api)的相关配置。

**返回值**：TDesign Next Message 实例。

## 更多方法

Umo Editor 基于[Tiptap](https://tiptap.dev/)实现，更多 Tiptap 内部方法请查看[Tiptap 编辑器](./tiptap)。
